<template>
	<view class="step-body">
		<view class="purchase-module">
			<view class="purchase-title">
				合同信息
			</view>
			<view class="purchase-content">
				<view class="content-box">
					<view class="cbox-1">
						合同编号：
					</view>
					<view class="cbox-2">
						{{ctrNo}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						合同名称：
					</view>
					<view class="cbox-2">
						{{ctrName}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						合同类型：
					</view>
					<view class="cbox-2">
						{{contractTypeDictText}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						合同形成方式：
					</view>
					<view class="cbox-2">
						{{projectType}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						合同金额(元)：
					</view>
					<view class="cbox-2">
						{{clinchMoney}}
					</view>
				</view>
				<!-- <view class="content-box">
					<view class="cbox-1">
						合同级别：
					</view>
					<view class="cbox-2">
						{{ctrLevel}}
					</view>
				</view> -->
				<!-- <view class="content-box">
					<view class="cbox-1">
						承办单位：
					</view>
					<view class="cbox-2">
						{{organizers}}
					</view>
				</view> -->
				<!-- <view class="content-box">
					<view class="cbox-1">
						项目(承办单位)负责人：
					</view>
					<view class="cbox-2">
						{{projectLeader}}
					</view>
				</view> -->

				<view class="content-box">
					<view class="cbox-1">
						对方单位：
					</view>
					<view class="cbox-2">
						{{supplierName}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						对方开户银行：
					</view>
					<view class="cbox-2">
						{{depositBank}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						对方银行账号：
					</view>
					<view class="cbox-2">
						{{bankAccount}}
					</view>
				</view>
				<!-- <view class="content-box">
					<view class="cbox-1">
						采购方式：
					</view>
					<view class="cbox-2">
						{{purWays}}
					</view>
				</view> -->
				<!-- <view class="content-box">
					<view class="cbox-1">
						有效期开始日期：
					</view>
					<view class="cbox-2">
						{{startDate}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						有效期终止日期：
					</view>
					<view class="cbox-2">
						{{endDate}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						计划签订日期：
					</view>
					<view class="cbox-2">
						{{planDate}}
					</view>
				</view> -->
				<view class="content-box">
					<view class="cbox-1">
						是否进口产品
					</view>
					<view class="cbox-2">
						{{importType}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						是否设置保证金：
					</view>
					<view class="cbox-2">
						{{depositMoney}}
					</view>
				</view>
				<!-- <view class="content-box">
					<view class="cbox-1">
						合同份数（份）：
					</view>
					<view class="cbox-2">
						{{ctrNumber}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						合同页数（页）：
					</view>
					<view class="cbox-2">
						{{contractPages}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						用章数量（个）：
					</view>
					<view class="cbox-2">
						{{chapterNumber}}
					</view>
				</view> -->
				<!-- <view class="content-box">
					<view class="cbox-1">
						使用科研经费:
					</view>
					<view class="cbox-2">
						{{researchFunding}}
					</view>
				</view> -->
				<view class="content-box">
					<view class="cbox-1">
						结算款：
					</view>
					<view class="cbox-2">
						{{thirdCode}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						结算款说明：
					</view>
					<view class="cbox-2">
						{{otherComments}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						合同形成过程：
					</view>
					<view class="cbox-2">
						{{contractProcess}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						合同摘要：
					</view>
					<view class="cbox-2">
						{{contractSummary}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						合同备注：
					</view>
					<view class="cbox-2">
						{{extend}}
					</view>
				</view>
				<!-- <view class="content-box">
					<view class="cbox-1">
						补签理由：
					</view>
					<view class="cbox-2">
						{{supplementaryReason}}
					</view>
				</view> -->
			</view>
		</view>
		<view class="purchase-module">
			<view v-if="contractFinance && contractFinance.length > 0">
			<view class="purchase-title">
				出资财务项目
			</view>
			<view class="rbox-1" v-for="item in contractFinance " :key='item.id'>
				<view class="content-box">
					<view class="cbox-1">
						财务项目编号：
					</view>
					<view class="cbox-2">
						{{item.finCode}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						财务项目名称：
					</view>
					<view class="cbox-2">
						  {{ item.finName}}
					</view>
				</view>
			</view>
			</view>
			<view class="purchase-title">
				产品清单
			</view>
			<view class="rbox-1" v-for="item in contractDevicePlans " :key='item.id'>
				<view class="content-box">
					<view class="cbox-1">
						设备名称：
					</view>
					<view class="cbox-2">
						{{item.deviceName}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						型号：
					</view>
					<view class="cbox-2">
						  {{ item.deviceModel}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						单价(元)：
					</view>
					<view class="cbox-2">
						 {{ item.devicePrice ? formatPayMoney(item.devicePrice) : '--' }}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						数量：
					</view>
					<view class="cbox-2">
						{{item.quantity}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						总价(元)：
					</view>
					<view class="cbox-2">
						 {{ item.totalMoney ? formatPayMoney(item.totalMoney) : '--' }}
					</view>
				</view>
			</view>
			<view class="rbox-1" v-for="item in applyPlans " :key='item.id'>
				<view class="content-box">
					<view class="cbox-1">
						计划编号：
					</view>
					<view class="cbox-2">
						{{item.planCode}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						计划名称：
					</view>
					<view class="cbox-2">
						  {{ item.planName}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						项目名称：
					</view>
					<view class="cbox-2">
						 {{ item.projectName}}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						计划金额（元）：
					</view>
					<view class="cbox-2">
						 {{ item.totalMoney ? formatPayMoney(item.totalMoney) : '--' }}
					</view>
				</view>
				<view class="content-box">
					<view class="cbox-1">
						已用金额(元)：
					</view>
					<view class="cbox-2">
						 {{ item.usedMoney ? formatPayMoney(item.usedMoney) : '--' }}
					</view>
				</view>
				
				<view class="content-box">
					<view class="cbox-1">
						可用金额(元)：
					</view>
					<view class="cbox-2">
						 {{ item.balanceMoney ? formatPayMoney(item.balanceMoney) : '--' }}
					</view>
				</view>
				
				<view class="content-box">
					<view class="cbox-1">
						本次出资金额(元)：
					</view>
					<view class="cbox-2">
						 {{ item.payMoney ? formatPayMoney(item.payMoney) : '--' }}
					</view>
				</view>
					
			
			</view>
			<view class="purchase-title">
				付款计划
			</view>
			<view class="purchase-content">
				<view class="rbox-1" v-for="item in supplierList " :key='item.id'>
					<view class="content-box">
						<view class="cbox-1">
							付款类型
						</view>
						<view class="cbox-2">
							{{item.payTypeDictText}}
						</view>
					</view>
					<view class="content-box">
						<view class="cbox-1">
							付款金额(元)
						</view>
						<view class="cbox-2">
							  {{ item.payMoney ? formatPayMoney(item.payMoney) : '--' }}
						</view>
					</view>
					<view class="content-box">
						<view class="cbox-1">
							付款比例
						</view>
						<view class="cbox-2">
							{{item.payProportion}}
						</view>
					</view>
					<view class="content-box">
						<view class="cbox-1">
							付款条件
						</view>
						<view class="cbox-2">
							{{item.remark}}
						</view>
					</view>

				</view>
				<view class="rbox-3" style="line-height: 90rpx;text-align: center;" v-if="supplierList.length==0">
					暂无数据！
				</view>
			</view>
		</view>
		<view class="file-content">
			<view class="file-box">
				<view class="file-title">
					<view class="file-title-1">
						<view class="title">合同附件</view>
						<!-- <view class="waring">(预算金额≥20万)</view> -->
					</view>
					<view class="file-title-2" data-key='1' @click="change">
						<text class="number">{{HTFJList.length}}</text>
						<text class="lg text-black "
							:class="[key.join(',').indexOf('1')>-1?'cuIcon-fold':'cuIcon-unfold']"
							style="font-size: 32rpx;"></text>
					</view>
				</view>
				<view class="file-body" v-if="key.join(',').indexOf('1')>-1">
					<view class="file-item" v-for="item in HTFJList" :key='item.id'>
						<view class="file-item-box">
							<view class="box-image">
								<!-- <image src="../../static/Wicon/word.png" mode=""></image> -->
							</view>
							<view class="box-item-text">
								{{item.fileSourceName}}
							</view>
						</view>
						<view class="box-tsize">
							<text
								style="margin-right:10rpx;">{{item.fileSize?(item.fileSize/1024).toFixed(2):"--"}}kb</text>
							<text>|</text>
							<text style="margin-left:10rpx;">{{item.createTime}}</text>
						</view>
						<view class="box-item-option">
							<!-- @click="downloadFile(item)" -->
							<button class="cu-btn round line-blue download-btn" @click="downloadFile(item)"
								>阅览下载</button>
						</view>

					</view>
					<view class="file-item file-item-none" v-if="HTFJList.length==0">
						暂无数据！
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getContractDetail,
		getHtCtrPaymentplan,
		queryDictList
	} from '../../../api/service.js'
	export default {
		props: ['status', 'id'],
		data() {
			return {
				supplierList: [],
				contractDevicePlans:[],
				applyPlans:[],
				HTFJList: [],
				key: ['1'],
				ctrNo: '',
				ctrName: '',
				ctrCurrency: '',
				purWays: '',
				supplierName: '',
				contractTypeDictText: '',
				ctrLevel: '',
				contractSummary:'',
				organizers: '',
				projectLeader: '',
				planDate: '',
				depositMoney: '',
				ctrNumber: '',
				contractPages: '',
				chapterNumber: '',
				projectType: '',
				researchFunding:'',
				thirdCode:'',
				otherComments:'',
				clinchMoney: 0,
				extend:'',
				supplementaryReason:'',
				contractProcess:'',
				purWaysList: [{
						value: '1',
						text: '单一来源'
					},
					{
						value: '2',
						text: '自行采购'
					}, {
						value: '3',
						text: '公开招标'
					}, {
						value: '4',
						text: '邀请招标'
					}, {
						value: '5',
						text: '竞争性谈判'
					},
				],
				isFlage2: false,
				operatorB: '',
				paymentMethod: '',
				frgnCurrency: '',
				depositBank: '',
				bankAccount: '',
				contactB: '',
				signedPlace: '',
				startDate: '',
				endDate: '',
				deliveryDate: '',
				guaranteePeriod: '',
				exceptArrDate: '',
				isGovPruchase: '',
				importType: '',
				fsupplier: '',
				contractFinance:[]
			}
		},
		computed: {
			isFlage() {
				console.log(this.type)
				return this.type == 'DLCG' ? false : true
			}
		},
		created() {
			this.queryContractDetail();
			this.queryHtCtrPaymentplan();
		},
		methods: {
			// code 的码装换
			blackCode(type,values){
				  var  tempDt=null;
				  console.log(values)
				return new Promise(function(resolve,reject){
					queryDictList({id:type}).then(res=>{
						if(res.success){
							tempDt=res.result.filter(item=>{
								return item.value==values
							})
							resolve(tempDt.length>0?tempDt[0].text:'--')
						}else{
							reject('--')
						}
					})
				})
			},
			// 合同信息
			queryContractDetail() {
				getContractDetail({
					id: this.id
				}).then(res => {
					if (res.success) {
						this.$nextTick(() => {
							//合同编号
							this.ctrNo = res.result.contractCode;
							//合同名称
							this.ctrName = res.result.contractName;
							//合同类型
							 this.contractTypeDictText= res.result.contractTypeDictText;
							//采购方式 
							this.purWays = res.result.fromModeDictText; 
							//合同级别
							this.blackCode('HT_LEVEL',(res.result.contractLevel?res.result.contractLevel:"1")).then(res =>{
								this.ctrLevel=res
								console.log('合同级别'+res)
							})
							//合同工程类型
							// this.blackCode('HT_GC_TYPE',(res.result.businessType?res.result.businessType:"Gui_Kou")).then(res =>{
							// 	this.projectType=res
							// })
							this.projectType=res.result.fromModeDictText
							//承办单位
							this.organizers=res.result.organizers;
							//承办单位负责人
							this.projectLeader=res.result.proLeaderName;
							//   //成交供应商
							this.supplierName = res.result.companyName == 'BA' ? '暂无' : res.result.companyName;
							//   //开户银行
							this.depositBank = res.result.bank;
							//   //银行账号
							this.bankAccount = res.result.account;
							//合同签订日期
							this.signedDate = res.result.signedDate;
							//起始日期 
							this.startDate = res.result.contractStartDate;
							//终止日期
							this.endDate = res.result.contractEndDate;
							//计划日期
							this.planDate =res.result.signDate;
							//合同份数
							this.ctrNumber= res.result.ctrPage;
							//合同页数
							this.contractPages= res.result.ctrPage;
							//用章数量
							this.chapterNumber= res.result.chapterNumber;
							//是否进口产品
							this.importType = res.result.isImported == '1' ? '是' : '否';
							//是否设置保证金
							this.depositMoney= res.result.isBond == '1' ? '是' : '否';
							//科研经费
							this.researchFunding= res.result.isScientific =='1' ? '是' : '否';
							//合同金额
							this.clinchMoney = (parseFloat(res.result.contractMoney) || 0).toFixed(2);
							//三方编号
							this.thirdCode= res.result.settleMoney;
							//其他说明事项
							this.otherComments=res.result.settleRemark;
							//采购过程
							this.contractProcess=res.result.contractProcess;
							//备注
							this.extend =res.result.extend1;
							//补签
							this.supplementaryReason=res.result.supplementaryReason;
							
							this.contractSummary = res.result.remark;
							//付款
							this.supplierList=res.result.contractPays
							// this.HTFJList = res.result.Contract.file;
							//产品清单
							this.contractDevicePlans= res.result.contractDevicePlans;
							this.applyPlans= res.result.contractDevicePlans[0].applyPlans;
							// console.log('applyPlans'+res.result.contractDevicePlans.ApplyPlans)
							//附件
							this.HTFJList= res.result.files;
						})
					}
				})
			},
 
			change(e) {
				console.log(e) 
				var currentKey = e.currentTarget.dataset.key;
				var newData = [...this.key];
				if (this.key.join(',').indexOf(currentKey) > -1) {
					this.key = newData.filter(item => {
						return item != currentKey
					});
				} else {
					this.key.push(currentKey)
				}
			},
			queryHtCtrPaymentplan() {
				console.log('进入方法')
				getHtCtrPaymentplan({
					id: this.id
				}).then(res => {
					if (res.success) {
						this.contractFinance = res.result.records;
					}
				})
			},
			downloadFile(record) {
				console.log('this.download',this.download)
				console.log('record.id',record.id)
				window.open(`${this.download}sys/file/view/${record.id}`, "_blank");

			},
			  formatPayMoney(value) {
			        // 将值转换为浮点数
			        const num = parseFloat(value) || 0;
			
			        // 保留两位小数
			        const fixedNum = num.toFixed(2);
			
			        // 使用正则表达式添加千位分隔符
			        return fixedNum.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
			    }
		}
	}
</script>

<style lang="scss">
	@import "../../../colorui/purchase.scss";

	.file-item-none {
		line-height: 60rpx;
		text-align: center;
	}

	.box-item-option {
		display: flex;
		// align-items: flex-end;
		flex-direction: row;
		justify-content: flex-end;
		text-align: right;
		padding: 10rpx 8rpx;
	}

	.download-btn {
		height: 48rpx !important;
		padding: 0 20rpx !important;
		// display: inline-block;
	}

	.file-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 10rpx;

		.file-item-box {

			display: flex;
			flex-direction: row;
			flex: 1;
			justify-content: flex-start;

			// align-items: center;
			.box-image {
				flex: 0;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.box-item-text {
				flex: 1;
				padding-left: 26rpx;
			}
		}

		.box-tsize {
			padding-left: 74rpx;
			line-height: 36rpx;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			// line-height:32px;
		}
	}

	.file-content {
		background: #f5f5f5;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.file-box {
			flex: 1;
			margin-bottom: 100rpx;
			background: #fff;
			min-height: 124rpx;
			padding: 20rpx 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			// align-items: center;

			&:first-child {
				margin-top: 20rpx;
			}
		}


	}

	.file-title {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #F7F4F4;
		padding-bottom: 6rpx;

		.file-title-1 {
			flex: 4;
			text-align: left;

			.title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 42rpx;
			}

			.waring {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(250, 85, 60, 1);
				line-height: 34rpx;
			}
		}

		.file-title-2 {
			flex: 1;
			text-align: right;

		}
	}
</style>